<!DOCTYPE html>
<html>
  <head>
    <title>旅游投诉</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      <link rel="stylesheet" href="${s.base}/mobile/css/base.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/component.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.css">
  </head>
  <body>
	<div class="xyg-comp-list-select">
       <div class="xyg-comp-list-select-item">
            <div class="xyg-comp-list-select-item-title"> 
             标题
            </div>
            <div class="xyg-comp-list-select-item-content"> 
             <input type="text" placeholder="请先输入标题" maxlength="100" id="title" />
            </div>
       </div>
        <div class="xyg-comp-list-select-item">
            <div class="xyg-comp-list-select-item-title">
                手机号
            </div>
            <div class="xyg-comp-list-select-item-content">
                <input type="text"  id="phone" placeholder="请先填写手机号" maxlength="11" />
            </div>
        </div>
       <div class="xyg-comp-list-select-item">
            <div class="xyg-comp-list-select-item-title">
             地址
            </div>
             <div class="xyg-comp-list-select-item-content">
                 <input type="text"  id="address" placeholder="请先填写地址" maxlength="100" />            </div>
       </div> 
       <div class="xyg-comp-list-textarea-item">
            <div class="xyg-comp-list-textarea-item-title">
                投诉内容
            </div>
             <div class="xyg-comp-list-textarea-item-content">
            <textarea id="content"  placeholder="请先填写投诉内容" ></textarea>
            </div>
       </div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title" style="font-size: 14px;">图片上传</p>
                            <div class="weui-uploader__info"></div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">

                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" onchange="ajaxFileUploadAll('uploaderInput','phone/advice')"  class="weui-uploader__input" type="file" name="file" accept="image/*" multiple>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

  	</div>
   <div class="xyg-bottom">
    	<button type="button" id="submitBtn" class="weui-btn weui-btn_warn">申请提交</button>
    </div>
  <style type="text/css">
	  html,body{background:#f5f5f5;}
  	.xyg-comp-list-select{width:100%; height:auto;}
	  .xyg-comp-list-select .xyg-comp-pic{width:90%; padding:0.5rem 5%; background: #FFF;}
	  .xyg-comp-list-select .xyg-comp-pic-title{width:100%;line-height:1.5rem; padding-bottom: 0.5rem; font-size: 0.8rem; color:#000; letter-spacing: 0.01rem; }
	  .xyg-comp-list-select .xyg-comp-pic-title-left{width: 50%; height: 6rem; float: left;}
	   .xyg-comp-list-select .xyg-comp-pic-title-left img{width: 100%; height: 6rem;}
	   .xyg-comp-list-select .xyg-comp-pic-title-right{width: 50%; height: 6rem; float: left;}
	  
	.xyg-comp-list-select-item{width:90%; padding:0px 5%; line-height:2.2rem; height:2.2rem;font-size: 0.8rem; color:#000; letter-spacing: 0.01rem; background: #FFF; border: 0.001rem solid #f5f5f5;}
	  .xyg-comp-list-select-item input::-webkit-input-placeholder {color: #999999;}
	.xyg-comp-list-select-item .xyg-comp-list-select-item-icon{width:70%; line-height:2rem; text-align:right; float:left; color: #999999;}
	.xyg-comp-list-select-item .xyg-comp-list-select-item-title{width:30%; height:2rem; text-align:left; float:left;font-size: 14px;}
	.xyg-comp-list-select-item .xyg-comp-list-select-item-content{width:70%; height:2rem; text-align:left; float:left;font-size: 14px;}
	.xyg-comp-list-select-item .xyg-comp-list-select-item-content input{width:100%; height:2rem; line-height:2rem;background-color:transparent;border:0;font-size: 14px; text-align:right;}
	.xyg-comp-xy{height:2rem; line-height:2rem; width:width:93%; margin:0px 2% 0px 5%;}
	.xyg-bottom{width:90%; height:auto;  margin:1.5rem 5%;}
      .xyg-comp-list-textarea-item{width:90%; padding:0px 5%; line-height:4.2rem; height:4.2rem;font-size: 0.8rem; color:#000; letter-spacing: 0.01rem; background: #FFF; border: 0.001rem solid #f5f5f5;}
      .xyg-comp-list-textarea-item .xyg-comp-list-textarea-item-title{width:30%;font-size: 14px; height:4rem; text-align:left; float:left;}
      .xyg-comp-list-textarea-item textarea::-webkit-input-placeholder {color: #999999;font-size: 14px;}
      .xyg-comp-list-textarea-item .xyg-comp-list-textarea-item-content{width:70%; font-size: 14px;height:4rem; text-align:left; float:left;}
      .xyg-comp-list-textarea-item .xyg-comp-list-textarea-item-content textarea{width:100%; font-size: 14px;height:4rem; line-height:1.2rem;background-color:transparent;border:0; color: #999999; text-align:right;}
  </style>
  </body>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="${s.base}/mobile/js/jquery-2.1.4.js"></script>
  <script src="${s.base}/mobile/js/jquery-weui.js"></script>
  <script src="${s.base}/mobile/js/dateUtil.js"></script>
  <script src="${s.base}/mobile/fonts/iconfont.js"></script>
  <script type="text/javascript" src="${s.base}/mobile/js/ajaxfileupload.js"></script>
  <script type="text/javascript">
      function ajaxFileUploadAll(fileId,catalog) {
          ajaxFileUpload(fileId,catalog,function (result) {
              result=JSON.parse(result);
              if(result.code==0){
                  $("#uploaderFiles").append('<li class="weui-uploader__file" data-id="'+result.data+'" style="background-image:url('+result.data+')"></li>');
              }else{
                  $.toast("图片上传失败，请重试！", "text");
              }
          });
      }
      var memberId='${memberId}';
      $("#submitBtn").on("click",function(){
          var title = $("#title").val();
          if(title == null || title == "") {
              $.toast("请输入标题", "text");
              return false;
          }

          var phone = $("#phone").val();
          if(phone == null || phone == "") {
              $.toast("请输入手机号", "text");
              return false;
          }
          var regPhone = /^(1[2|3|4|5|6|7|8|9][0-9]{9})$/;
          if(regPhone.test(phone) === false){
              $.toast("手机号输入错误", "text");
              return  false;
          }
          var address = $("#address").val();
          if(address == null || address == "") {
              $.toast("请输入地址", "text");
              return false;
          }
          var content = $("#content").val();
          if(content == null || content == "") {
              $.toast("请输入投诉内容", "text");
              return false;
          }
          var ids="";
         $("#uploaderFiles li").each(function (index,obj) {
             if(ids!=null&&ids!=""){
                 ids+=","+$(obj).attr("data-id");
             }else{
                 ids=$(obj).attr("data-id");
             }
         })
          var param = {title:title,address:address,memberId:memberId,phone:phone,content:content,fileId:ids};
          $.showLoading("正在提交中");
          $.post("/phone/adviceSave",param,function(result){
              if(0==result.code){
                  $.hideLoading();
                  $.alert("提交成功,我们会尽快处理！",function () {
                      window.location.reload();
                  });

              }else{
                  $.hideLoading();
                  $.toast(result.msg, "text");
              }
          },"json");
      });
  </script>
</html>

